<script setup lang="ts">
import { reactive, ref } from 'vue'
import { storeToRefs } from 'pinia'

import { useUserStore } from '@/store/modules/user'

import { useChangeLoginBoxStatus } from '@/hooks/useLoginShow'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import type { ILoginData } from '@/service/modules/user/type'

const userStore = useUserStore()
const { isShowLoginBox, code } = storeToRefs(userStore)

// 切换场景： 0:表单登录：手机号 ； 1:微信扫码
const scene = ref<number>(0)
const changeScene = () => {
  scene.value = 1
}
const changeScene2 = () => {
  scene.value = 0
}
// 判断显示input的类型 false ：处于输入手机号的状态，获取验证码的状态 true: 处于输入验证码，提交登录的状态
const isLogin = ref<boolean>(false)
// login from
interface IformData {
  phoneNum: string
  codeNum: string
}
const formData = reactive<IformData>({
  phoneNum: '',
  codeNum: ''
})
// 自定义校验规则： 手机号
const ValidatePhone = (rule: any, value: any, callback: any) => {
  const regPhone = /^1[3456789]\d{9}$/
  if (regPhone.test(value)) {
    callback()
  } else {
    callback(new Error('请输入正确的手机号！'))
  }
}
const ValidateCode = (rule: any, value: any, callback: any) => {
  if (/\d{6}/.test(value)) {
    callback()
  } else {
    callback(new Error('请输入正确的验证码！'))
  }
}
const formRules = reactive<FormRules>({
  phoneNum: [
    {
      required: true,
      message: '请输入11位的手机号',
      trigger: 'blur'
    },
    {
      validator: ValidatePhone,
      message: '请输入正确的手机号',
      trigger: 'change'
    }
  ],
  codeNum: [
    {
      required: true,
      message: '请输入6位的验证码',
      trigger: 'blur'
    },
    {
      validator: ValidateCode,
      trigger: 'blur',
      message: '请输入正确的验证码'
    }
  ]
})
const formRef = ref<FormInstance>()
const codeRef = ref()
// 发送请求验证码
const getCodeByPhone = async (phone: string) => {
  await userStore.fetchGetCodeByPhoneAction(phone)
  formData.codeNum = code.value
}

const getCode = async () => {
  // 获取验证码
  // 表单验证
  formRef.value?.validateField('phoneNum', (res) => {
    if (res) {
      // 发送验证码的请求
      getCodeByPhone(formData.phoneNum)

      isLogin.value = true
    } else {
      // ElMessage.error('Oops, 获取验证码失败！')
      Error('Oops, 获取验证码失败！')
    }
  })
}
const onSubmit = async () => {
  await formRef.value?.validate()

  // 登录

  const loginParams: ILoginData = {
    phone: formData.phoneNum,
    code: formData.codeNum
  }
  try {
    await userStore.fetchLoginByPhoneandCodeAction(loginParams)
  } catch (error) {
    ElMessage({
      type: 'error',
      message: (error as Error).message
    })
  }
}

// 关闭loginbox
const handleClose = (done: () => void) => {
  done()
  useChangeLoginBoxStatus()
  // Object.assign(formData, {
  //   phoneNum: '',
  //   codeNum: ''
  // })
  isLogin.value = false
  formRef.value?.resetFields()
}
</script>
<template>
  <div class="login-box">
    <el-dialog v-model="isShowLoginBox" width="65%" :before-close="handleClose">
      <div class="content">
        <div class="left">
          <!-- 手机号 -->
          <div class="phone-box" v-show="scene == 0">
            <el-form
              :model="formData"
              class="form"
              show-message
              status-icon
              :rules="formRules"
              ref="formRef"
            >
              <!-- title -->
              <div class="title-label">
                <span v-if="!isLogin">手机号码</span>
                <span v-if="isLogin"
                  >验证码已发送至 {{ formData.phoneNum }}</span
                >
              </div>
              <el-form-item v-show="!isLogin" prop="phoneNum">
                <el-input
                  inline-message
                  v-model="formData.phoneNum"
                  placeholder="请输入手机号"
                />
                <el-button class="btn" type="primary" @click="getCode">
                  获取验证码
                </el-button>
              </el-form-item>
              <el-form-item v-show="isLogin" prop="codeNum">
                <el-input
                  v-model="formData.codeNum"
                  placeholder="请输入验证码"
                  ref="codeRef"
                >
                  <template #append>
                    <count-down @get-code-click="getCode"></count-down>
                  </template>
                </el-input>
                <el-button class="btn" type="primary" @click="onSubmit">
                  <span>登录</span>
                </el-button>
              </el-form-item>
            </el-form>
            <div class="login-way">
              <div class="way-title">其他方式登录</div>
              <div class="way-list">
                <div class="icon-show icon-wechat" @click="changeScene">
                  <icon-wechat-code></icon-wechat-code>
                </div>
              </div>
            </div>
          </div>

          <!-- 微信 -->
          <div class="other" v-show="scene == 1">
            <div class="other-title">微信登录</div>
            <div class="ercode-box">
              <img src="../../assets/images/code_login_wechat.png" alt="" />
            </div>
            <div class="login-way">
              <div class="way-title">手机登录</div>
              <div class="way-list">
                <div class="icon-show icon-phone" @click="changeScene2">
                  <icon-phone></icon-phone>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div class="show_box">
              <img class="img" src="../../assets/images/code_app.png" alt="" />

              <div class="text_box">
                <icon-wechat-code></icon-wechat-code>

                <p class="text">微信扫一扫关注</p>
                <p class="text">“快速预约挂号”</p>
              </div>
            </div>
            <div class="show_box">
              <img class="img" src="../../assets/images/code_app.png" alt="" />

              <div class="text_box">
                <icon-phone class="phone"></icon-phone>
                <p class="text">扫一扫下载</p>
                <p class="text">“预约挂号”APP</p>
              </div>
            </div>
          </div>
          <div class="bottom">
            <p class="b-text">xxxxxx官方指定平台</p>
            <p class="b-text">快速挂号 安全放心</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped lang="less">
.login-box {
  :deep(.el-dialog__header) {
    height: 30px;
  }
  .content {
    background: aliceblue;
    display: flex;
    align-items: center;
    padding: 20px 0;
    .left {
      flex: 1;
      background: #fff;
      box-shadow: 0 0 20px 0 rgba(73, 144, 241, 0.2);
      margin: 30px;
      .phone-box {
        .form {
          margin: 30px;
          .title-label {
            letter-spacing: 1px;
            font-weight: 700;
            color: #333;
            font-size: 16px;
            margin: 20px 0;
          }
          :deep(.el-input__wrapper) {
            box-shadow: none;
            .el-input__inner {
              border-bottom: 1px solid #fff;
              font-size: 18px;
              color: #333;
              letter-spacing: 3px;
              font-weight: 500;
              padding: 10px 0;
              height: 40px;
              line-height: 40px;
              &:focus {
                border-bottom: 1px solid var(--primary-color);
              }
            }
          }
          :deep(.el-input-group__append) {
            box-shadow: none;
          }
          .btn {
            width: 100%;
            margin: 20px 0;
            height: 40px;
            line-height: 40px;
            letter-spacing: 2px;
            font-size: 16px !important;
            font-weight: 800;
          }
        }
      }

      .other {
        padding: 20px;
        .other-title {
          text-align: center;
          color: #333;
          letter-spacing: 3px;
          font-size: 20px;
          padding: 15px 0;
        }
        .ercode-box {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .login-way {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 30px 0;
        .way-title {
          color: #666;
          margin: 10px 0;
        }
        .icon-show {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          &.icon-wechat {
            background-color: #51c332;
          }
          &.icon-phone {
            background-color: #0199fe;
          }
          .icon {
            color: #fff;
            width: 16px;
            height: 16px;
          }
        }
      }
    }
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      .top {
        display: flex;

        .show_box {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          .img {
            width: 140px;
            height: 140px;
          }
          .text_box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .icon {
              color: #51c332;
              margin: 15px 0;
              &.phone {
                color: #0199fe;
              }
            }
            .text {
              color: #333;
              padding: 7px 0;
            }
          }
        }
      }
      .bottom {
        margin-top: 30px;
        text-align: center;
        .b-text {
          font-size: 20px;
          color: #000;
          font-style: italic;
          padding-top: 15px;
        }
      }
    }
  }
}
</style>
